<script setup>
// 外部依赖
import skrollr from "skrollr"
import VanillaTilt from 'vanilla-tilt';

// 图片
import bay from '../assets/images/small/bay.jpg'
import sea from '../assets/images/small/sea.jpg'
import palmtrees from '../assets/images/small/palmtrees.jpg'
import coast from '../assets/images/small/coast.jpg'
import bigbay from '../assets/images/bay.jpg'
import bigsea from '../assets/images/sea.jpg'
import bigpalmtrees from '../assets/images/palmtrees.jpg'
import bigcoast from '../assets/images/coast.jpg'

// 组件
import MemberCard from "./MemberCard.vue";
import TeacherCard from './TeacherCard.vue'
import NewsCard from './NewsCard.vue'
import OtherInfo from './OtherInfo.vue'

// 接口
import { listCourse, listResearch, listFunding } from '../api/info'

// 其他
import { nextTick, onActivated } from "vue";

let imgUrl = [coast, palmtrees, bay, sea, coast, palmtrees, bay, sea]
let bigImgUrl = [bigbay, bigsea, bigpalmtrees, bigcoast]
let skr

let course_list_0 = ref(null)
let course_list_1 = ref(null)
let course_list_2 = ref(null)
let researchList = ref([{
    name: "",
    description: ""
}])
let fundingList = ref([{
    title: ""
}])

listResearch().then(res => {
    researchList.value = res.rows
})

listFunding().then(res => {
    console.log(res.rows);
    fundingList.value = res.rows
})

onMounted(() => {
    skr = skrollr.init({
        forceHeight: false
    })
    VanillaTilt.init(document.querySelectorAll(".tilt-element"), {
        max: 15,
        speed: 400,
        glare: true,
        "max-glare": 0.5
    });

    listCourse().then(res => {
        try {
            course_list_0.value.children[0].innerHTML = `《${res.rows[0].name}》`
            course_list_0.value.children[1].innerHTML = res.rows[0].goal
            course_list_1.value.children[0].innerHTML = `《${res.rows[1].name}》`
            course_list_1.value.children[1].innerHTML = res.rows[1].goal
            course_list_2.value.children[0].innerHTML = `《${res.rows[2].name}》`
            course_list_2.value.children[1].innerHTML = res.rows[2].goal
        } catch (error) {
            console.log('课程数据缺失');
        }

        skr.refresh()
    })
    skr.refresh()
})

nextTick(() => {
    skr.refresh()
})
</script>

<template>
    <div class="parallax-image-wrapper" data-anchor-target="#page-intro" data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[0] + ')' }"
            data-anchor-target="#page-intro" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>
    <div class="parallax-image-wrapper" data-anchor-target=".news + .gap" data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[1] + ')' }"
            data-anchor-target=".news + .gap" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>
    <div class="parallax-image-wrapper" data-anchor-target=".teachers + .gap" data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[2] + ')' }"
            data-anchor-target=".teachers + .gap" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>
    <div class="parallax-image-wrapper" data-anchor-target=".features-list + .gap"
        data-bottom-top="transform:translateY(200%)" data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[3] + ')' }"
            data-anchor-target=".features-list + .gap" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>
    <div class="parallax-image-wrapper" data-anchor-target=".funding + .gap" data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[0] + ')' }"
            data-anchor-target=".funding + .gap" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>
    <div class="parallax-image-wrapper" data-anchor-target=".about-us + .gap" data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[1] + ')' }"
            data-anchor-target=".about-us + .gap" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>
    <div class="parallax-image-wrapper" data-anchor-target=".body-text + .gap" data-bottom-top="transform:translateY(200%)"
        data-top-bottom="transform:translateY(0)">
        <div class="parallax-image" :style="{ backgroundImage: 'url(' + bigImgUrl[2] + ')' }"
            data-anchor-target=".body-text + .gap" data-bottom-top="transform: translateY(-80%);"
            data-top-bottom="transform: translateY(80%);"></div>
    </div>

    <div id="skrollr-body">

        <div id="page-intro" class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[0] + ')' }">
            <div class="wrapper">
                <div class="title">
                    <span>复杂系统协同自抗扰控制与韧性优化实验室</span>
                </div>
                <div class="text-content">
                    <p>“若时代有托，你准备好了吗？”欢迎对国防工程领域、自动化控制、计算机智能算法感兴趣的学生报考！</p>
                    <p>同时非常欢迎感兴趣且优秀的本科生加入课题组参与科研活动，也欢迎相关的老师进行探讨与学术交流合作！</p>
                </div>
            </div>
        </div>

        <!-- 实验室动态 -->
        <div class="news">
            <p class="text-gradient">
                <span>实验室动态</span>
            </p>
            <NewsCard></NewsCard>
        </div>

        <div class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[1] + ')' }"></div>

        <!-- 研究队伍 -->
        <div class="teachers" id="teachers">
            <p class="text-gradient">
                <span>研究队伍</span>
            </p>
            <TeacherCard></TeacherCard>
        </div>

        <div class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[2] + ')' }"></div>

        <!-- 研究方向 -->
        <div class="features-list" id="research">
            <p class="text-gradient">
                <span>研究方向</span>
            </p>
            <div data-100-bottom-top="transform: translateY(200px); opacity: 0.4"
                data-center-top="transform: translateY(0px); opacity: 1" v-for="(item, index) in researchList" :key="index">
                <p>
                <p class="title">{{ item.enName }}</p>
                <p class="title">
                    {{ item.cnName }}
                </p>
                <p class="desc">{{ item.cnAbstract }}</p>
                <p class="desc">{{ item.enAbstract }}</p>
                </p>
                <img :src="item.picture" alt="">
            </div>
        </div>

        <div class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[3] + ')' }"></div>

        <!-- 研究成果 -->
        <div class="funding" id="funding">
            <p class="text-gradient">
                <span>研究成果</span>
            </p>
            <div class="funding-wrapper" data-200-center-top="transform: scale(0.6); opacity: 0"
                data-center-center="transform: scale(1); opacity: 1">
                <p v-for="(item, index) in fundingList" :key="index">
                    [{{ index + 1 }}] {{ item.title }}
                </p>
            </div>
        </div>

        <div class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[0] + ')' }"></div>

        <!-- 团队成员 -->
        <div class="about-us" id="memberList">
            <p class="text-gradient">
                <span>团队成员</span>
            </p>
            <MemberCard></MemberCard>
        </div>

        <div class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[1] + ')' }"></div>

        <!-- 教学工作 -->
        <div class="body-text content" id="domo">
            <div class="text-gradient" style="margin-bottom: 80px;">
                <span>教学工作</span>
            </div>
            <div class="p-wrapper">
                <p data-300-center-top="transform: scale(0.8); opacity: 0"
                    data-300-center-center="transform: scale(1); opacity: 1" ref="course_list_0">
                <div class="title"></div>
                <div class="goal"></div>
                </p>

                <p data-200-center-top="transform: scale(0.8); opacity: 0"
                    data-200-center-center="transform: scale(1); opacity: 1" ref="course_list_1">
                <div class="title"></div>
                <div class="goal"></div>
                </p>

                <p data-100-center-top="transform: scale(0.8); opacity: 0"
                    data-100-center-center="transform: scale(1); opacity: 1" ref="course_list_2">
                <div class="title"></div>
                <div class="goal"></div>
                </p>
            </div>
        </div>

        <div class="gap" :style="{ backgroundImage: 'url(' + bigImgUrl[2] + ')' }"></div>

        <div class="others">
            <div class="text-gradient">
                <span>其他信息</span>
            </div>
            <OtherInfo></OtherInfo>
        </div>

        <footer>
            <div class="footer-left" data-300-center-top="transform: scale(0.8); opacity: 0"
                data-300-center-center="transform: scale(1); opacity: 1">
                <h4>
                    <span>友情链接</span>
                </h4>
                <p class="footer-links">
                    <a href="https://www.fzu.edu.cn/" target="_blank">福州大学</a>
                    ·
                    <a href="https://jwch.fzu.edu.cn/" target="_blank">福州大学教务处</a>
                    ·
                    <a href="https://ccds.fzu.edu.cn/" target="_blank">福州大学计算机与大数据学院/软件学院</a>
                </p>
                <p class="footer-company-name">智能信号处理与主动抗干扰控制实验室 &copy; 2023</p>
            </div>
        </footer>
    </div>
</template>

<style scoped>
@import "../assets/homeView.css";

.shrink {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shrink p,
.shrink h4 {
    text-align: center;
}
</style>
